<template>
  <div class="classinfo">
    <el-form ref="eduxcloudCourseForm" :model="EduxcloudCourse" label-width="220px">
      <el-row style="line-height:36px;">
        <el-col :span="2">
          <span>课程标题</span>
        </el-col>
        <el-col :span="22">
          <el-input v-model="EduxcloudCourse.title"/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <span>课程副标题</span>
        </el-col>
        <el-col :span="22">
          <el-input :rows="8" v-model="EduxcloudCourse.subtitle" type="textarea"/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <span>分类</span>
        </el-col>
        <el-col :span="22">
          <treeselect v-model="EduxcloudCourse.categoryId" :multiple="false" :options="courseCategorys" style="width: 200px"></treeselect>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <span>状态</span>
        </el-col>
        <el-col :span="22">
          <el-radio-group v-model="EduxcloudCourse.status">
            <el-radio label="published" border>已发布</el-radio>
            <el-radio label="draft" border>未发布</el-radio>
            <el-radio label="closed" border>已关闭</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row style="line-height:36px;">
        <el-col :span="2">
          <span>价格</span>
        </el-col>
        <el-col :span="22">
          <el-input v-model="EduxcloudCourse.price" style="width: 200px"/>
        </el-col>
      </el-row>
<!--      <el-row>-->
<!--        <el-col :span="2">-->
<!--          <span>连载状态</span>-->
<!--        </el-col>-->
<!--        <el-col :span="22">-->
<!--          <el-radio-group v-model="EduxcloudCourse.serializeMode">-->
<!--            <el-radio label="1" border>非连载课程</el-radio>-->
<!--            <el-radio label="2" border>更新中</el-radio>-->
<!--            <el-radio label="3" border>已完结</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-row>
        <el-col :span="2">
          <span>封面图片</span>
        </el-col>
        <el-col :span="22">
          <img v-if="EduxcloudCourse.largePicture" :src="EduxcloudCourse.largePicture" alt class="img" style="width:270px;height:auto;">
          <el-upload
            :on-change="handleChange"
            :http-request="uploadFile"
            :limit="1"
            action=""
            class="upload-demo"
            accept="image/jpg, image/png"
          >
            <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <span>课程简介</span>
        </el-col>
        <el-col :span="20">
          <tinymce :height="400" v-model="EduxcloudCourse.about"/>
        </el-col>
      </el-row>
      <el-button type="primary" style="margin:20px 0 20px 140px;" @click="addCourse">保 存</el-button>
    </el-form>
  </div>
</template>

<script>
  // import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import Tinymce from '@/components/Tinymce'
  import { categoryList } from '@/api/user/user'
  import { getTenantId, getUserId } from '@/utils/auth'
  import { upLoadFile } from '@/api/upLoadFile'
  import { addCourse } from '@/api/subject/course'
  import eventBus from '@/eventBus'

  export default {
    components: {
      Tinymce,
      Treeselect
    },
    data() {

      return {
        EduxcloudCourse: {
          categoryId: null,
          status: 'published',
          serializeMode: '1',
          title: '',
          largePicture: 'https://runhe-image-bucket.oss-cn-beijing.aliyuncs.com/%E6%9A%91%E6%9C%9F%E5%9F%B9%E8%AE%AD%E7%8F%AD%E6%8A%A5%E5%90%8D%E4%B8%AD_B8AD82B8A28A469CBDEFF84E3762861B.jpg'
        },
        courseCategorys: [],
        content: '',
        value: '',
        classifyselected: '',
        radio: 2,
        hasChange: false,
        hasInit: false,
        tinymceId: this.id,
        fullscreen: false,
        imageUrl: '',
        languageTypeList: {
          'en': 'en',
          'zh': 'zh_CN'
        },
        classify: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }]
      }
    },
    created() {
      this.getCourseCategorys()
      this.EduxcloudCourse = this.$route.params
      if (!this.EduxcloudCourse.categoryId) {
        this.EduxcloudCourse.categoryId = null
      }
      if (this.$route.query.title) {
        this.EduxcloudCourse.title = this.$route.query.title
      }

      console.log('zi', this.$route.params)
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      getCourseCategorys() {
        categoryList('course', getTenantId()).then(response => {
          this.courseCategorys = response.data.items
        }).catch(() => {
        })
      },
      handleChange(file) {
        this.file = file.raw
      },
      uploadFile() {
        const fileForm = new FormData()
        fileForm.append('name', this.file.name)
        fileForm.append('uid', this.file.uid)
        fileForm.append('file', this.file)
        upLoadFile(fileForm).then(response => {
          this.EduxcloudCourse.largePicture = response.data.url
        })
      },
      addCourse() {
        this.$refs['eduxcloudCourseForm'].validate((valid) => {
          if (valid) {
            if (!this.EduxcloudCourse.categoryId) {
              this.$message.error('请选择分类!')
            } else {
              this.EduxcloudCourse.tenantId = getTenantId()
              this.EduxcloudCourse.userId = getUserId()
              addCourse(this.EduxcloudCourse).then(response => {
                if (response.code === 200) {
                  this.EduxcloudCourse.id = response.data
                  eventBus.$emit('acceptEduxcloudCourseId', response.data)
                  this.$notify({ title: '成功', message: '创建成功', type: 'success', duration: 2000 })
                }
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  /*@import '~@/styles/mixin.scss';*/

  .classinfo {
    width: 100%;
    background-color: #fff;

    .el-row {
      line-height: 36px;
      margin-top: 20px;

      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }

      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    }
  }
</style>
